<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>App250802</title>
    <style>
        body {
            margin: 12px;
        }

        button {
            padding: 2px 8px;
            border-radius: 4px;
            border: solid 1px lightgrey;
            cursor: pointer;
            margin-bottom: 4px;
        }

        #container {
            display: flex;
            min-height: 80vh;
            /* 据说这样能至少占据 80 的可视高度 */
        }

        #container h2 {
            margin-top: 8px;
            margin-bottom: 8px;
        }

        #left-container {
            width: 260px;
            background-color: gainsboro;
            padding: 10px;
        }

        #right-container {
            flex: 1;
            background-color: aliceblue;
            padding: 14px;
        }

        #right-container h3 {
            margin-top: 10px;
            margin-bottom: 10px;
        }

        #right-container p {
            margin-top: 6px;
            margin-bottom: 6px;
        }

        #px_options p {
            cursor: pointer;
        }

        .file-uploader-div {
            height: 40px;
            border: dotted 1px gray;
            padding: 12px;
            max-width: 400px;
            background-color: ghostwhite;
        }

        .form-area {
            background-color: lightyellow;
            padding: 10px;
        }

        .form-area .form-item {
            margin-top: 6px;
            margin-bottom: 6px;
            font-size: medium;
        }

        .form-item input {
            background-color: inherit;
            border: none;
            border-bottom: solid 1px lightgray;
            padding: 2px;
            outline: none;
        }

        .teacher_item span {
            cursor: pointer;
        }

        .detail-textarea {
            font-size: 16px;
            border: solid lightgrey 1px;
            outline: solid lightgrey 1px;
            border-radius: 4px;
            min-width: 500px;
        }

        .teacher_card {
            background-color: beige;
            padding: 1px 8px;
            border-radius: 4px;
            margin-bottom: 4px;
        }

        .teacher-detail {
            font-size: small;
            color: gray;
        }

    </style>
</head>
<body>
<div id="container">
    <div id="left-container">
        <h2>Left Container</h2>
        <div>
            <button onclick="newPx()">新增培训项目</button>
            <button onclick="reloadLeft()">刷新</button>
        </div>
        <div id="px_options">
            <p># Selection 1</p>
            <p># Selection 1</p>
            <p># Selection 1</p>
            <p># Selection 1</p>
            <p># Selection 1</p>
            <p># Selection 1</p>
            <p># Selection 1</p>
        </div>
    </div>
    <div id="right-container">
        <h2 id="right_header_h2">Right Container: Your Title Here</h2>
        <div>
            <button onclick="test()">测试</button>
            <button onclick="refreshPage()">刷新</button>
            <button id="open_folder_button">打开所在文件夹</button>
            <button>复制作业指导书模板doc</button>
            <button>复制远程办税说明书pdf</button>
            <button>复制三证一卡模板doc</button>
            <button>复制网大题库模板doc</button>
            <button>复制网大考试申请模板doc</button>
            <button>查看开班说明</button>
            <button>复制考试说明</button>
            <button>打开乘车表</button>
            <button>打开成绩单模板</button>
            <button>打开成绩单xlsx</button>
            <button>打开随机成绩单xlsx</button>
            <button>打开签到表（250731）</button>
            <button>打开签到表（250801）</button>
            <button>打开签到表（250802）</button>
            <button>打开课程表xlsx</button>
        </div>
        <h3>文件处理</h3>
        <p>学员名单已收到，上传后自动整理：代开发票、完税证明、请假单、师资费确认单、作业指导书</p>
        <div class="file-uploader-div">File Uploader</div>
        <h3>师资课程列表</h3>
        <p>
            总计税后：<span>1123.34</span>
            总计税前：<span>1313.42</span>
            <button>新增</button>
        </p>
        <div class="teacher_card">
            <p class="teacher_item">
                <span>[授课日期字符串]</span>
                <span>[授课课时字符串]</span>
                <span>[老师姓名]</span>
                <span>[内部/外部]</span>
                <span>[税前（自动）]</span>
                <span>[税后]</span>
                <span>[车牌号]</span>
            </p>
            <p class="teacher-detail">
                <span>[授课内容]</span>
            </p>
            <p class="teacher-detail">
                <span>[三证一卡情况]</span>
                <span>[需要作业指导书]</span>
                <span>[作业指导书情况]</span>
                <span>[确认单情况]</span>
                <span>[完税情况]</span>
                <span>[发票情况]</span>
            </p>
            <p>
                拖拽上传三证
                <button>复制报税说明文字</button>
                <button>复制明日上课提醒文字</button>
                <button>删除此条</button>
            </p>
        </div>
        <h3>学员报道和请假（培训实施）</h3>
        <div>
            <p>
                <span>尚未报道：XXX</span>
                <button>添加未报道人</button>
            </p>
            <p>
                <span>请假情况：XXX(250803)</span>
                <button>添加请假人</button>
            </p>
            <div>
                <button>已/未点击一键报道</button>
                <button>请假单已/未上传</button>
                <button>签到表已/未上传</button>
                <button>培训已/未验收</button>
            </div>
        </div>
        <h3>备注区</h3>
        <form name="from2" id="form2">
            <div>
                <label>
                    <textarea rows="10" name="details" class="detail-textarea"></textarea>
                </label>
            </div>
            <button>更新备注</button>
        </form>

        <h3>基本信息区</h3>
        <form name="form1" class="form-area" id="form1">
            <div class="form-item">
                校区：
                <label><input type="radio" name="school" value="bao">宝坻</label>
                <label><input type="radio" name="school" value="shi">市区</label>
            </div>
            <div class="form-item">
                形式：
                <label><input type="radio" name="how" value="simple">理论</label>
                <label><input type="radio" name="how" value="complex">理论+实操</label>
            </div>
            <div class="form-item">
                是否封闭：
                <label><input type="radio" name="bi" value="yes">封闭</label>
                <label><input type="radio" name="bi" value="no">不封闭</label>
            </div>
            <div class="form-item">培训地点：<label><input type="text" name="location"></label></div>
            <div class="form-item">开始日期：<label> <input type="text" name="begin_date"> </label></div>
            <div class="form-item">结束日期：<label><input type="text" name="end_date"></label></div>
            <div class="form-item">培训编号：<label><input type="text" name="px_idx"></label></div>
            <div class="form-item">培训准备-矿泉水：<label><input type="number" name="prepare1"></label></div>
            <div class="form-item">培训准备-笔和本：<label><input type="number" name="prepare2"></label></div>
            <div class="form-item">培训准备-去的车：<label><input type="number" name="prepare3"></label></div>
            <div class="form-item">培训准备-回的车：<label><input type="number" name="prepare4"></label></div>
            <div class="form-item">
                培训目标：
                <div>
                    <label><textarea name="px_target" rows="10" class="detail-textarea"></textarea></label>
                </div>
            </div>
            <div class="form-item">
                培训内容：
                <div>
                    <label><textarea name="px_content" rows="10" class="detail-textarea"></textarea></label>
                </div>
            </div>
            <input type="submit" value="Submit"/>
        </form>
    </div>
</div>
<script>

    function test() {
        window.pywebview.api.function_test(12, "/list/all", {"Hello": "World", "idx": 0, "op": "Add"}).then((res) => {
            alert(JSON.stringify(res));
        })
    }

    function refreshPage() {
        location.reload();
    }

    const right_header_h2 = document.getElementById("right_header_h2");

    function renderRight(idx_str, title) {
        right_header_h2.textContent = "加载中：" + "[" + idx_str + "]" + title
        // 加载其它的内容
        document.getElementById("open_folder_button").onclick = () => {
            open_dir(idx_str);
        }
    }

    function reloadLeft() {
        window.pywebview.api.post_msg("/px/list", "0", "0").then((res) => {
            if (res.result && res.result === "OK") {
                const parentDiv = document.getElementById("px_options");
                parentDiv.innerHTML = "";
                res.dataList.map((item => {
                    let subElem = document.createElement("p");
                    subElem.textContent = "# " + item.title;
                    parentDiv.appendChild(subElem);
                    subElem.addEventListener("click", () => {
                        renderRight(item.idx_str, item.title);
                    })
                }))
            }
        })
    }

    const form1Obj = document.getElementById("form1");

    function onSubmit1(e) {
        console.log("onSubmit1");
        e.preventDefault();
        const formDataObj = new FormData(form1Obj);
        const detail = {
            "px_target": formDataObj.get("px_target"),
            "px_content": formDataObj.get("px_content"),
        }
        alert(JSON.stringify(detail));
    }

    form1Obj.addEventListener("submit", onSubmit1);

    function onSubmit2(e) {
        console.log("onSubmit2");
        e.preventDefault();
    }

    document.getElementById("form2").addEventListener("submit", onSubmit2);

    function newPx() {
        let newPx = prompt("新增培训项目");
        newPx = newPx.trim()
        if (newPx !== "") {
            window.pywebview.api.post_msg("/px/new", 0, newPx).then((res) => {
                if (res.result && res.result === "OK") {
                    alert("添加成功！")
                }
            })
        }
    }

    window.addEventListener('pywebviewready', () => {
        reloadLeft();
    })

    function open_dir(idx_str) {
        window.pywebview.api.post_msg("/px/open", idx_str, newPx).then((res) => {
            if ((!res.result) || (res.result !== "OK")) {
                alert("打开失败");
            }
        })
    }
</script>
</body>
</html>
